<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./jquery.min.js"></script>
</head>

<body>
  <input type="checkbox" id="checkAll">
  <button id="btn">反选</button>
  <ul>
    <li><input type="checkbox" class="checkItem">张三</li>
    <li><input type="checkbox" class="checkItem">李四</li>
    <li><input type="checkbox" class="checkItem">麻子</li>
  </ul>
  <script>
    $('#checkAll').on('change', function () {
      // 取到了当前全选框的选中状态
      const isChecked = $(this).prop('checked');
      console.log(isChecked);
      $('.checkItem').prop('checked', isChecked);
    })

    $('.checkItem').on('change', function () {
      const itemLength = $('.checkItem').length;
      const selectedLength = $('.checkItem:checked').length;

      $('#checkAll').prop('checked', itemLength === selectedLength);

      // 选中的个数 = 所有元素的个数

      // console.log('itemLength', itemLength)
      // console.log('selectedLength', selectedLength);
    })

    $('#btn').on('click', function () {
      // 点击了反选按钮的逻辑
      $('.checkItem').click();
      // $('.checkItem').each(function () {
      //   // console.log(this);
      //   $(this).prop('checked', !$(this).prop('checked'))
      // })
    })
  </script>
</body>

</html>